<template>
  <div>
    <el-menu
      background-color="#323743"
      text-color="#fff"
      active-text-color="#409eff"
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      :router="true"
      :default-active="routerClick"
    >
      <!-- 一级菜单 -->
      <el-submenu v-for="(item, index) in menuList" :key="index" :index="index">
        <template slot="title">
          <i :class="firstIcon[item.id]"></i>
          <span>{{ item.authName }}</span>
        </template>

        <!-- 二级菜单 -->
        <el-menu-item
          v-for="item in item.children"
          :key="index"
          :index="'/' + item.path"
          @click="routerClick"
        >
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{ item.authName }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "Aside",
  props: {
    menuList: Array,
    isCollapse: {
      type: Boolean,
      default: false
    },
    width: Number
  },
  data() {
    return {
      firstIcon: {
        "125": "el-icon-user-solid",
        "103": "el-icon-s-tools",
        "101": "el-icon-s-goods",
        "102": "el-icon-s-order",
        "145": "el-icon-s-platform"
      }
    };
  },
  computed: {
    routerClick() {
      // console.log(this.$route.path);
      return this.$route.path;
    }
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.el-menu {
  border-right: none;
}
</style>
